<template>
    <Popup :class="`tech-tip-modal ${mode} ${styleMode}`" v-model="value" :close-on-click-overlay="false" :overlay="true">
        <div :class="`tip-content ${mode} ${styleMode}`">
            <img :class="`icon ${type}`" :src="iconImage" :alt="title">
            <div class="title">
                <MiniIcon :name="miniIcon" :size="20" :mode="mode" :theme="iconColor" :styleMode="styleMode" />
                {{title}}
            </div>
            <div class="tip">{{tip}}</div>
            <Button class="tip-action-button" size="large" @click="btnAction">{{btnText}}</Button>
        </div>
    </Popup>
</template>

<script>
import { Popup, Button } from 'vant';
import { MiniIcon } from '@components/base';
import failImg from '@assets/icon/tip_fail_reject.png';
import successImg from '@assets/icon/tip_success.png';
import rejectImg from '@assets/icon/tip_fail_reject.png';
import refundImg from '@assets/icon/tip_refund.png';
import ModeMixin from '@common/mixin';
export default {
    name: 'TipModal',
    mixins: [ModeMixin],
    components: {
        Popup,
        Button,
        MiniIcon,
    },
    props: {
        type: {
            type: String,
            default: 'fail', // fail reject refund
        },
        title: {
            type: String,
            default: '失败',
        },
        tip: {
            type: String,
            default: '',
        },
        btnText: {
            type: String,
            default: '确定',
        },
        miniIcon: {
            type: String,
            default: 'closefill',
        },
        iconColor: {
            type: String,
            default: '#FE3B30',
        },
    },
    computed: {
        iconImage() {
            const { type } = this.$props;
            let icon = failImg;
            switch(type) {
            case 'fail':
                icon = failImg;
                break;
            case 'success':
                icon = successImg;
                break;
            case 'reject':
                icon = rejectImg;
                break;
            case 'refund':
                icon = refundImg;
                break;
            default:
                break;
            }
            return icon;
        },
    },
    data() {
        return {
            value: false,
        };
    },
    methods: {
        show() {
            this.value = true;
        },
        close() {
            this.value = false;
        },
        btnAction() {
            this.$emit('action');
            this.close();
        },
    },
};
</script>

<style lang="less" scoped>
.tech-tip-modal {
    .style-mode();
    .flex-column-center();
    width: 100%;
    background-color: transparent;
    .tip-content {
        .style-mode();
        background-color: @white;
        width: 90%;
        .flex-column-center();
        // .p(@gap-md);
        border-radius: @border-radius;
        overflow: hidden;
        .icon {
            width: 150px;
            .m-t(@gap-lg);
            .m-b(@gap-md);
        }
        .title {
            .font-size-md();
            .m-v(@gap-sm);
            color: @text-color;
            font-weight: @font-weight-bold;
            .flex-row-center();
            .mini-icon {
                .m-r(@gap-sm);
            }
        }
        .tip {
            color: @tip-color;
            height: 30px;
            .font-size();
            width: 100%;
            .t-c();
        }
        .tip-action-button {
            .m-t(@gap-lg);
            height: 56px;
            color: #576B95;
            font-weight: @font-weight-bold;
        }
    }
}
</style>
